<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    .el-header, .el-footer {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        /*line-height: 800px;
        padding-top: 50px;*/
    }
    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>


<body>

<div id="app">
    <el-container>
        <el-header style="background-color: #111111;color: white;position: relative;">
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;position: absolute;left: 20px;"><i class="el-icon-arrow-left"></i>返回</a>
            我的信息
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;float: right;"><i class="el-icon-s-home"></i>首页</a>&nbsp;&nbsp;&nbsp;&nbsp
        </el-header>
        <el-container>
            <el-aside width="100px">
            </el-aside>
            <el-main text-align="center">
                <el-tabs type="border-card">
                    <el-tab-pane label="打招呼信息">
                        <el-badge  class="item">
                            <el-button size="small" @click="quanbu()">全部</el-button>
                        </el-badge>
                        <el-badge :value="number" class="item">
                            <el-button size="small" @click="sayStatus(0)">未读</el-button>
                        </el-badge>
                        <el-badge  class="item">
                            <el-button size="small" @click="sayStatus(1)">已读</el-button>
                        </el-badge>
                        <el-badge  class="item" v-if="statusButton == 0">
                            <el-button size="small" @click="updateAllStatus(1)">全部已读</el-button>
                        </el-badge>
                        <el-badge  class="item" v-if="statusButton == 1">
                            <el-button size="small" @click="updateAllStatus(2)">删除全部已读</el-button>
                        </el-badge>
                        <div style="min-height: 500px;margin-top: 10px;margin-left: 100px">
                            <el-table
                                    :data="sayHelloList"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="index"
                                        width="100"
                                        label="ID">
                                    <template slot-scope="scope">
                                        <span v-text="scope.$index+1" type="text" size="small"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        prop="userOne.userName"
                                        label="用户名称">
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        prop="sayTime"
                                        label="发送时间">
                                </el-table-column>
                                <el-table-column
                                        width="200"
                                        prop="sayContent"
                                        label="消息内容">
                                </el-table-column>
                                <el-table-column
                                        width="150">
                                    <template slot-scope="scope">
                                        <el-button @click="show(scope.$index)" type="text" size="small">查看</el-button>
                                        <el-button @click="shanchu(scope.$index)" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="好友申请">
                        <div style="min-height: 500px;margin-top: 10px;margin-left: 50px">
                            <el-table
                                    :data="friendList"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="index"
                                        width="100"
                                        label="ID">
                                    <template slot-scope="scope">
                                        <span v-text="scope.$index+1" type="text" size="small"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        prop="userOne.userName"
                                        label="用户昵称">
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        prop="userOne.realName"
                                        label="用户真名">
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        label="用户性别">
                                    <template slot-scope="scope">
                                        <span v-text="friendList[scope.$index].userOne.userSex == 1?'男':'女'" type="text" size="small"></span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="150"
                                        prop="userOne.userAge"
                                        label="用户年龄">
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        width="200">
                                    <template slot-scope="scope">
                                        <el-button @click="showUserOne(scope.$index)" type="text" size="small">查看</el-button>
                                        <el-button @click="updateUserOne(scope.$index,2)" type="text" size="small">通过</el-button>
                                        <el-button @click="updateUserOne(scope.$index,3)"  type="text" size="small">拒绝</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
            <el-aside width="100px">
            </el-aside>
        </el-container>
        <el-footer style="background-color:#202329 ;color: white;"><!--系统公司信息-->
            <p style="margin-bottom: 20px" >© 2022 Match Marriage All rights reserved | Design by
                <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch" style="color: white"> ZJ.</a>
            </p>
        </el-footer>
    </el-container>


</div>

</body>
<script>
    var userId=[[${userId}]]
    new Vue({
        el: "#app",
        data(){
            return {
                sayHelloList:[],
                friendList:[],
                number:null,
                sayHello:[],
                statusButton:null,
            }
        },
        mounted(){
            var _this=this;
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/chat/mySayHelloNoLook",
                data:userId
            }).then(function(response) {
                _this.number = response.data;
            });
            axios({
                headers:{'Content-Type':'application/json;charset=utf8'},
                method:"post",
                url:"/friends/findMyAllFriendByStatusApply",
                data:userId
            }).then(function(response) {
                _this.friendList = response.data;
            });
            var params = new URLSearchParams();
            params.append("sayUserTwo",userId);
            params.append("sayStatus","0");
            _this.statusButton=0;
            axios({
                method:"post",
                url:"/chat/findAllMySayHelloByStatus",
                data:params
            }).then(function(response) {
                _this.sayHelloList = response.data;
                for (var i = 0; i < _this.sayHelloList.length;i++){
                    _this.sayHelloList[i].sayTime=timestampToTime(response.data[i].sayTime);
                }
            });

        },
        methods: {
            shuaXin(){
                window.location.reload();
            },
            quanbu(){
                var _this = this;
                _this.statusButton=3;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"/chat/findAllMySayHello",
                    data:userId
                }).then(function(response) {
                    _this.sayHelloList = response.data;
                    for (var i = 0; i < _this.sayHelloList.length;i++){
                        _this.sayHelloList[i].sayTime=timestampToTime(response.data[i].sayTime);
                    }
                });
            },
            show(id){
                var _this = this;
                var usersId = this.sayHelloList[id].userOne.userId;
                var f=document.createElement('form');
                var params = new URLSearchParams();
                params.append("sayId",this.sayHelloList[id].sayId);
                params.append("sayStatus","1")
                axios({
                    method:"post",
                    url:"/chat/deleteSayHelloById",
                    data:params
                }).then(function(response) {
                    if (response.data=="1"){
                        f.style.display='none';
                        f.action='/chat/toUserInfoPageBySayHello';
                        f.method='post';
                        f.innerHTML='<input type="hidden" name="userId" value="'+usersId+'"/>' +
                            '<input type="hidden" name="url" value="/chat/toSayHelloPage"/>';
                        // f.innerHTML='';
                        document.body.appendChild(f);
                        f.submit();
                        // _this.$message.success("操作成功！");
                    }else {
                        _this.$message.error("操作失败！");
                    }
                });

            },
            showUserOne(id){
                var _this = this;
                var usersId = this.friendList[id].userOne.userId;
                var f=document.createElement('form');
                f.style.display='none';
                f.action='/chat/toUserInfoPageBySayHello';
                f.method='post';
                f.innerHTML='<input type="hidden" name="userId" value="'+usersId+'"/>' +
                    '<input type="hidden" name="url" value="/chat/toSayHelloPage"/>';
                // f.innerHTML='';
                document.body.appendChild(f);
                f.submit();
            },
            shanchu(id){
                var _this = this;
                var params = new URLSearchParams();
                params.append("sayId",this.sayHelloList[id].sayId);
                params.append("sayStatus","2")
                this.$confirm('此操作将删除本条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:"post",
                        url:"/chat/deleteSayHelloById",
                        data:params
                    }).then(function(response) {
                        if (response.data=="1"){
                            location.reload();
                            // _this.$message.success("操作成功！");
                        }else {
                            _this.$message.error("操作失败！");
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            sayStatus(sayStatus) {
                var _this = this;
                var params = new URLSearchParams();
                params.append("sayUserTwo",userId);
                params.append("sayStatus",sayStatus);
                _this.statusButton=sayStatus;
                axios({
                    method:"post",
                    url:"/chat/findAllMySayHelloByStatus",
                    data:params
                }).then(function(response) {
                    _this.sayHelloList = response.data;
                    for (var i = 0; i < _this.sayHelloList.length;i++){
                        _this.sayHelloList[i].sayTime=timestampToTime(response.data[i].sayTime);
                    }
                });

            },
            updateAllStatus(sayStatus) {
                var _this = this;
                var params = new URLSearchParams();
                params.append("sayUserTwo",userId);
                params.append("sayStatus",sayStatus);
                this.$confirm('是否继续此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.statusButton=sayStatus;
                    axios({
                        method:"post",
                        url:"/chat/updateSayHelloByMyId",
                        data:params
                    }).then(function(response) {
                        if (response.data=="1"){
                            location.reload();
                            // _this.$message.success("操作成功！");
                        }else {
                            _this.$message.error("操作失败！");
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },

            updateUserOne(id,status) {
                var _this = this;
                var params = new URLSearchParams();
                params.append("friendId",_this.friendList[id].friendId);
                params.append("friendStatus",status);
                this.$confirm('是否继续此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:"post",
                        url:"/friends/updateFriendStatusByIdAndStatus",
                        data:params
                    }).then(function(response) {
                        if (response.data=="1"){
                            location.reload();
                            // _this.$message.success("操作成功！");
                        }else {
                            _this.$message.error("操作失败！");
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },


        }

    })
    function timestampToTime(timestamp) {
        var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        return Y+M+D;
    };

</script>
</html>
